<script setup>
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  // 引入 Element Plus 组件样式
  import 'element-plus/dist/index.css';

  // 合同总数
  const contractTotal = 49888;
  
  // 圆环图数据
  const pieData = [
    { value: 15000, name: '已付款' },
    { value: 20000, name: '未付款' },
    { value: 14888, name: '已归档' }
  ];

  // 圆环图 DOM 引用
  const pieChartRef = ref(null);
  
  const option = {
      tooltip: {
        trigger: 'item'
      },
      toolbox: {
        feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
        }
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 'center'
      },
      series: [
        {
          name: '合同状态',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: pieData
        }
      ]
    };

  const initPieChart = () => {
    const chartDom = pieChartRef.value;
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
  };
  
  onMounted(() => {
    initPieChart();
  });
  </script>
  
  <template>
      <!-- 合同情况 -->
      <div class="contract-section">
        <div class="section-header">
          <span>合同情况</span>
          <span>合同总数 {{ contractTotal }}份</span>
        </div>
        <div ref="pieChartRef" class="pie-chart"></div>
      </div>
  </template>
  
  <style scoped>
  
  .customer-section,
  .contract-section {
    width: 48%;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 15px;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .funnel-chart,
  .pie-chart {
    width: 100%;
    height: 300px;
  }
  </style>